<template>
	<div>
		<div class="main">
			<!-- 导航按钮 -->
			<navber-btn v-show="navsBtn"></navber-btn>

			<!-- 路由视图 -->
			<router-view @getnavs-btn="getnavsBtn" @get-player-id="getPlayerId" @get-play-all-id="getPlayAllId"
				@get-disc-all-id="getdiscAllId" @get-artists-all-id="getArtistsAllId"
				@get-search-all-id="getSearchAllId" @get-uid="getUid" :uid="uid" @set-btn="setBtn" :btn="btn"
				@get-style="getStyle" @get-hide-play="getHidePlay" @get-rec-id="getRecId" @get-follow="getFollow"></router-view>

			<!-- 播放器组件 -->
			<player v-show="playerId" :player-id="playerId" :list-id="listId" :disc-id="discId" :artists="artists"
				@set-player-id="setPlayerId" :searchId="searchId" :re-style="reStyle" :mvmu="mvmu" :rec-id="recId">
			</player>
		</div>
	</div>
</template>

<script>
	import navberBtn from "./components/base/navberBtn.vue";
	import player from "./components/base/player.vue";
	export default {
		data() {
			return {
				// 导航按钮
				navsBtn: true,
				// 播放歌曲id
				playerId: null,
				// 侦听播放列表id
				listId: null,
				// 新碟id
				discId: null,
				// 歌手id
				artists: null,
				// 搜索
				searchId: null,
				//用户
				uid: null,
				//索引
				btn: null,
				//音乐显示
				reStyle: true,
				// 视频-音乐
				mvmu: true,
				//最近播放
				recId: null,
			};
		},
		methods: {
			getPlayerId(id) {
				// 获取子组件播放歌曲id
				console.log("歌曲id", id);
				this.playerId = id;
			},
			getnavsBtn(obj) {
				this.navsBtn = obj;
			},
			getPlayAllId(id) {
				this.listId = id;
			},
			getdiscAllId(id) {
				this.discId = id;
			},
			getArtistsAllId(id) {
				this.artists = id;
			},
			setPlayerId(id) {
				this.playerId = id;
			},
			getSearchAllId(id) {
				this.searchId = id;
			},
			getUid(id) {
				this.uid = id;
			},
			setBtn(obj) {
				this.btn = obj;
			},
			getStyle(obj) {
				console.log(obj);
				this.reStyle = obj;
			},
			getHidePlay(obj) {
				this.mvmu = obj;
			},
			getRecId(obj) {
				this.recId = obj;
			},
			getFollow(id){
				this.id=id;
			},
		},
		components: {
			navberBtn,
			player
		},
	};
</script>

<style lang="less">
	@import "./assets/css/base.css";
</style>
